<template>
	<ul class="sorts">
		<li v-for="(item,index) in sortList" :key="item.id">
			<img :src="item.imgUrl" alt="" />
			<span>{{item.title}}</span>
		</li>
	</ul>
</template>

<script setup>
	// const sortList = [{
	// 	id: 1,
	// 	title: '蔬菜',
	// 	imgUrl: '/images/sort1.png'
	// }, {
	// 	id: 2,
	// 	title: '水果',
	// 	imgUrl: '/images/sort2.png'
	// }, {
	// 	id: 3,
	// 	title: '豆制品',
	// 	imgUrl: '/images/sort3.png'
	// }, {
	// 	id: 4,
	// 	title: '家禽',
	// 	imgUrl: '/images/sort4.png'
	// }, {
	// 	id: 5,
	// 	title: '米面油',
	// 	imgUrl: '/images/sort5.png'
	// }, {
	// 	id: 6,
	// 	title: '副食',
	// 	imgUrl: '/images/sort6.png'
	// }, {
	// 	id: 7,
	// 	title: '冻品',
	// 	imgUrl: '/images/sort7.png'
	// }, {
	// 	id: 8,
	// 	title: '调料',
	// 	imgUrl: '/images/sort8.png'
	// }, {
	// 	id: 9,
	// 	title: '后厨',
	// 	imgUrl: '/images/sort9.png'
	// }, {
	// 	id: 10,
	// 	title: '更多',
	// 	imgUrl: '/images/sort10.png'
	// }]
	// 发送请求
	import axios from 'axios'
	import {ref,onMounted} from 'vue'
	import http from '@/common/api/request.js'
	const sortList = ref([])
	onMounted(()=>{
		fetchData()
	})
	const fetchData = async()=>{
		// const res = await axios.get('/api/index/homeList')
		let  res = await http.$axios({url:'/api/index/homeList'})
		sortList.value=res.sortList
	}
	
</script>

<style scoped>
	.sorts {
		display: flex;
		/* flex-flow: row warp; */
		flex-wrap: wrap;
		width: 100%;
		font-size: 16px;
		box-sizing: border-box;
		background-color: white;
	}

	.sorts li {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		flex: 0 0 20%;
		margin: 0.3rem 0;
	}

	.sorts li img {
		width: 1rem;
		height: 1rem;
	}

	.sorts li span {
		margin-top: 0.3125rem;
	}
</style>